<style>

    body {
        position: relative;
    }

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }
    .radioBox{
        margin-left: 15px;
        margin-bottom: 15px;
    }
    .radioBox label{
        margin-right: 20px;
        cursor: pointer;
    }
    .radioBox input{
        width: 16px;
        height: 16px;
    }

    .inline{
        display: inline-block;
    }

    .form-times{
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        outline: 0 none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
</style>

<div class="row">
    <div class="col-sm-9">
        <div id="calendar"></div>
        <div class="bootbox modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="bootbox-close-button close">×</button>
                        <h4 class="modal-title">工作时间调整:</h4>
                    </div>
                    <div class="modal-body">
                        <div class="bootbox-body">
                            <form class="bootbox-form">
                                <input type="hidden" name="start"/>
                                <input type="hidden" name="end"/>
                                <div class="radioBox">
                                    <label>
                                        <input type="radio" name="working" value="1"/> 工作日
                                    </label>
                                </div>
                                <div class="radioBox">
                                    <label>
                                        <input type="radio" name="working" value="2"/> 非工作日
                                    </label>
                                </div>
                                <div class="radioBox">
                                    <label>
                                        <input type="radio" name="working" value="3"/> 特殊工作日
                                    </label>
                                    <div class="inline">
                                        <select class="form-times" name="am">
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                            <option value="13">13</option>
                                            <option value="14">14</option>
                                            <option value="15">15</option>
                                            <option value="16">16</option>
                                            <option value="17">17</option>
                                        </select>
                                        <select class="form-times" name="am_minute">
                                            <option value="00">00</option>
                                            <option value="30">30</option>
                                        </select>
                                    </div>
                                    <span class="inline">To</span>
                                    <div class="inline">
                                        <select class="form-times" name="pm">
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                            <option value="13">13</option>
                                            <option value="14">14</option>
                                            <option value="15">15</option>
                                            <option value="16">16</option>
                                            <option value="17">17</option>
                                            <option value="18">18</option>
                                        </select>
                                        <select class="form-times" name="pm_minute">
                                            <option value="00">00</option>
                                            <option value="30">30</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button data-bb-handler="cancel" type="button" class="btn btn-default" id="cancel">取消</button>
                        <button data-bb-handler="delete" type="button" class="btn btn-danger" id="del">删除 </button>
                        <button data-bb-handler="confirm" type="button" class="btn btn-primary" id="confirm">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-backdrop fade in" style="display: none;"></div>
    </div>
    <div class="col-sm-3">

    </div>
</div>


<script>
    function getFormJson(frm) {
        var o = {};
        var a = frm.serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    }

    /**
     * 获取工作日设置框的值
     * 过程:
     * 1.如果选择的是工作日，则返回"工作日";
     * 2.如果选择的是非工作日，则返回"非工作日";
     * 3.如果选择的是特殊工作日,则获取设置的时间,并格式化为"开始时间 To 结束时间"（例如: 8:30 To 17:30）；
     * */
    function get_info(){
        var info = getFormJson($(".modal-body form"));
        console.info(info);
        var flag = info["working"];
        if(flag=="1"){
            $(this).css("background","red");
            return "工作日";
        }else if(flag=="2"){
            return "非工作日";
        }else if(flag=="3"){
            var sh = info["am"];
            var sm = info["am_minute"];
            var eh = info["pm"];
            var em = info["pm_minute"];

            //判断4个都不能为空
            if(sh&&sm&&eh&&em){
                return sh+":"+sm+" To "+eh+":"+em;
            }else{
                alert("请选择完整的时间段");
                return "";
            }
        }else{
            //弹出框，提示必须选一个才能点确认
            alert("请选择一个选项");
            return "";
        }
    }

    /**
     * 设置工作日设置框的初始值
     * @param title:显示的内容
     * 过程:
     * 1.如果是"工作日"，则单选框选中"工作日";
     * 2.如果是"非工作日",则单选框选中"非工作日"；
     * 3.如果不是上面两种,则解析格式为 "开始时间 To 结束时间"（例如: 8:30 To 17:30）的字符串，设单选框选中"特殊工作日"，
     * */
    function set_info(title){

        if(title=="工作日"){
            $(".modal-body form input[name=working][value='1']").prop("checked",true);
        }else if(title=="非工作日"){
            $(".modal-body form input[name=working][value='2']").prop("checked",true);

        }else{
            var info = title.split(/(?::)|(?: To )/g);
            $(".modal-body form input[name=working][value='3']").prop("checked",true);

            $(".modal-body form select[name=am]").val(info[0]);
            $(".modal-body form select[name=am_minute]").val(info[1]);
            $(".modal-body form select[name=pm]").val(info[2]);
            $(".modal-body form select[name=pm_minute]").val(info[3]);
        }
    }

    /**
     * 显示模态框
     * @param start 开始日期 字符串(2015-12-11)
     * @param end 结束日期(非必要) 字符串(2015-12-11)
     * @param op 其他数据,根据实际情况可以是多个
     * @parma isdel 是否显示删除按钮(默认隐藏删除按钮)
     *
     * */
    function show_form(start,end,title,isdel){
        set_info(title);
        $(".modal-body form input[name=start]").val(start);
        $(".modal-body form input[name=end]").val(end);
        if(isdel==undefined){
            $("#del").hide();
        }else{
            $("#del").show();
        }
        $(".fade").show();
    }

    /**
     * 隐藏模态框，并初始化所有数据项，不知道form.reset行不行
     *
     * */
    function hide_form(){

        $(".modal-body form input[name=start]").val("");
        $(".modal-body form input[name=end]").val("");
        $(".modal-body form select[name=am]").val("");
        $(".modal-body form select[name=am_minute]").val("");
        $(".modal-body form select[name=pm]").val("");
        $(".modal-body form select[name=pm_minute]").val("");

        $(".fade").hide();
    }

    $(document).ready(function() {
        var current_event = undefined;
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            dayClick: function (date, allDay, jsEvent, view) {
                //获取当前日期下所有的event对象集合A
                var event_list = $('#calendar').fullCalendar('clientEvents', function(event) {
                    if(event.start.format() == date.format()) {
                        return true;
                    }
                    return false;
                });

                //如果集合A有数据，说明是修改，走修改流程，否则走新增流程

                if(event_list.length>0){
                    var evt = event_list[0];
                    current_event = evt;
                    show_form(date.format(),date.format(),evt.title,true);
                }else{
                    show_form(date.format(),date.format(),"");
                }

            }
        });

        $("#confirm").click(function () {
            var titles = get_info();
            if(titles==""){}
            else{
                var info = getFormJson($(".modal-body form"));
                if(current_event==undefined){
                    var eventData = {
                        title:titles,
                        start:info["start"],
                        end:info["end"]
                    };
                    $('#calendar').fullCalendar('renderEvent', eventData);
                }else{
                    eventData = current_event;
                    current_event = undefined;
                    eventData.title=titles;
                    $('#calendar').fullCalendar('updateEvent', eventData);
                }
                hide_form();
            }
        });

        $("#cancel").click(function () {
            hide_form();
        });
        $(".modal-header .close").click(function () {
            hide_form();
        });

        $("#del").click(function () {
            $('#calendar').fullCalendar('removeEvents', current_event._id);
            hide_form();
        });
    });

</script>

